<template>
  <div :class="className" :style="{height:height,width:width}"></div>
</template>

<script>
  import echarts from 'echarts'

  require('echarts/theme/macarons') // echarts theme
  import {debounce} from '@/utils'

  const animationDuration = 3000

  export default {
    name: 'raddar-chart',
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '300px'
      }
    },
    data() {
      return {
        chart: null
      }
    },
    mounted() {
      this.initChart()
      this.__resizeHanlder = debounce(() => {
        if (this.chart) {
          this.chart.resize()
        }
      }, 100)
      window.addEventListener('resize', this.__resizeHanlder)
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      window.removeEventListener('resize', this.__resizeHanlder)
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        var dataStyle = {
          normal: {
            label: {show: false},
            labelLine: {show: false},
            shadowBlur: 40,
            shadowColor: 'rgba(40, 40, 40, 0.5)',
          }
        };
        var placeHolderStyle = {
          normal: {
            color: 'rgba(0,0,0,0)',
            label: {show: false},
            labelLine: {show: false}
          },
          emphasis: {
            color: 'rgba(0,0,0,0)'
          }
        };
        this.chart.setOption({
      //    backgroundColor: '#f4f2e3',
          color: ['#85b6b2', '#6d4f8d','#cd5e7e'],
          tooltip : {
            show: true,
            formatter: "{b} : {c} ({d}%)"
          },
          legend: {
            itemGap:12,

            top: '87%',
            data:['鑫青松','耕创','其它']
          },
          series : [
            {
              name:'Line 1',
              type:'pie',
              clockWise:false,
              radius : [80,100],
              itemStyle : dataStyle,
              hoverAnimation: false,

              data:[
                {
                  value:100,
                  name:'鑫青松'
                },
                {
                  value:50,
                  name:'invisible',
                  itemStyle : placeHolderStyle
                }

              ]
            },
            {
              name:'Line 2',
              type:'pie',
              clockWise:false,
              radius : [60, 80],
              itemStyle : dataStyle,
              hoverAnimation: false,

              data:[
                {
                  value:150,
                  name:'耕创'
                },
                {
                  value:60,
                  name:'invisible',
                  itemStyle : placeHolderStyle
                }
              ]
            },
            {
              name:'Line 3',
              type:'pie',
              clockWise:false,
              hoverAnimation: false,
              radius : [40, 60],
              itemStyle : dataStyle,

              data:[
                {
                  value:80,
                  name:'其它'
                },
                {
                  value:50,
                  name:'invisible',
                  itemStyle : placeHolderStyle
                }
              ]
            }

          ]
        });
        /*      this.chart.setOption({
                tooltip: {
                  trigger: 'axis',
                  axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                  }
                },
                radar: {
                  radius: '66%',
                  center: ['50%', '42%'],
                  splitNumber: 8,
                  splitArea: {
                    areaStyle: {
                      color: 'rgba(127,95,132,.3)',
                      opacity: 1,
                      shadowBlur: 45,
                      shadowColor: 'rgba(0,0,0,.5)',
                      shadowOffsetX: 0,
                      shadowOffsetY: 15
                    }
                  },
                  indicator: [
                    { name: '正常', max: 100 },
                    { name: '故障', max: 100 },
                    { name: '空闲', max: 100 },

                  ]
                },
                legend: {
                  left: 'center',
                  bottom: '10',
                  data: ['耕创', '鑫青松', '其他']
                },
                series: [{
                  type: 'radar',
                  symbolSize: 0,
                  areaStyle: {
                    normal: {
                      shadowBlur: 13,
                      shadowColor: 'rgba(0,0,0,.2)',
                      shadowOffsetX: 0,
                      shadowOffsetY: 10,
                      opacity: 1
                    }
                  },
                  data: [
                    {
                      value: [95, 5, 5],
                      name: '耕创'
                    },
                    {
                      value: [89, 11, 0],
                      name: '鑫青松'
                    },
                    {
                      value: [70, 20, 10],
                      name: '其他'
                    }
                  ],
                  animationDuration: animationDuration
                }]
              })*/
      }
    }
  }
</script>
